<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<title>SUGAR Arithmetic Engine (JS)</title>


<!-- yui js -->
<script type="text/javascript" src="../../include/javascript/sugar_grp1_yui.js"></script>
<script type="text/javascript" src="../../include/javascript/sugar_grp1.js"></script>


<!--  sugar expressions js -->
<!-- <script language="javascript" src="./javascript/ExpressionJS.php"></script> -->

<script language="javascript" src="../../include/Expressions/javascript/expressions.js"></script>
<script language="javascript" src="../../cache/Expressions/functions_cache.js"></script>

<!-- custom js -->
<script language="javascript">
YAHOO.util.Event.onDOMReady( function() {
	var container = new YAHOO.widget.Overlay("container", {fixedcenter:true, visible:true, width:"400px"});
	container.render();
});

function checkEnter(e) {
	var characterCode; // literal character code will be stored in this variable

	characterCode = e.keyCode;

	if ( characterCode == 13 ) {
		evalExpression();
		document.getElementById('expression').select();
		return false;
	} else {
		return true;
	}
}

var i = 0;

function print_r(o, d) {
	var ret = "";
	if (d == null) d = 0;
	if (typeof(o) == "object") {
		ret = "Array\n";
		for (var j = 0; j < d; j++) {
			ret += "\t";
		}
		ret += "(\n";
		for (i in o) {
			for (var j = 0; j <= d; j++) {
				ret += "\t";
			}
			ret += "[" + i + "] => " + print_r(o[i], d + 2) + "\n"; 
		}
		for (var j = 0; j < d; j++) {
			ret += "\t";
		}
		ret += ")";
	} else if (typeof(o != "undefined")){
		ret += o;
	}
	
	return ret;
}

function evalExpression() {
	var parser = new SUGAR.expressions.ExpressionParser();
	var output = document.getElementById('results');
	var expression = document.getElementById('expression').value;

	if ( expression == 'clear' ) {
		init();
		return;
	}

	var out = "";

	out += '<div class="expression">' + expression + ':</div>';

	try {
		var result = parser.evaluate(expression);
		result = result.evaluate();
		out += '<div class="result" id="js_result_' + resultCount + '">' + print_r(result, 0) + "</div>";
	} catch (e) {
		if (e.message)
			alert(e.message);
		out += '<div class="result" id="js_result_' + resultCount + '">' + e + "</div>";
	}

	out += "<div class='clearer'></div>";

	var x = (i++%2);

	output.innerHTML = "<div class='casing" + x + "'>" + out + "</div>" + output.innerHTML;
	ajaxEvalExpression(expression);
}

function ajaxEvalExpression(expr) {
	YAHOO.util.Connect.asyncRequest('POST', 'expression_engine_eval.php', 
		{
			success: function(o){
				var output = document.getElementById('results');
				output.innerHTML = "<div class='ajax result' id='php_result_" + resultCount + "'>" + o.responseText + "</div>" + output.innerHTML;
				resultCount++;
			}
		}, "expression=" + expr);
}



function init() {
	resultCount = 0;
	document.getElementById('results').innerHTML = "";
}


window.onload = init;

</script>


<style type="text/css">

BODY {
	background: #BFBFBF;
	font-family: Trebuchet MS;
}

.expression {
	font-size:  10pt;
	float: left;
}

.casing0 {
	padding: 5px;
	background: #E4E4E4;
}

.casing1 {
	padding: 5px;
	background: #f4f4f4;
}

.ajax {
	padding: 5px;
	background: #a0f4a0;
}

.result {
	font-family: Verdana;
	font-size: 10pt;
	font-weight: bold;
	float: right;
}

.clearer {
	clear: both;
}

#results {
	margin: 0 auto;
	width: 350px;
	height: 350px;
	border: 1px solid #cccccc;
	overflow:auto;
	padding: 10px;
	background: #ffffff;
}


#container {
	width: 400px;
	margin: 0 auto;
	height: 400px;
	background: #ffffff;
	background: #EFEFEF;
	border: 1px solid #000;
	padding: 30px;
}


#input {
	text-align: center;
	height: 50px;
	margin: 0 auto;
}

#input INPUT[type=text] {
	font-family: Courier New;
}

</style>

</head>

<body>

<!-- div id="overlay" style="width: 100%; height: 100%;position: absolute; left: 0px; top: 0px; background: #BFBFBF; z-index: -10;"></div -->


<div id="container">

	<div id="results">
	</div>

	<div id="input">
		<input type="text" id="expression" style="width: 288px" onkeypress="checkEnter(event)">
		<input type="button" id="evaluate_button" value="Evaluate" onclick="evalExpression()">
		<input type="button" id="clear_button" value="Clear" onclick="init()">
	</div>

</div>

</body>

</html>